<template>
  <div class="cloud_frame" v-loading="loading">>
        <div class="head">  <span class="icon iconfont icon-banbenqiyeban"></span>版本信息</div>
     <table>
        <tr>
        <td>硬件信息</td>
        <td> {{info.length>0 ?info[0].cpus : ''}}</td>
      </tr>
      <tr>
        <td>操作平台</td>
        <td>{{ info.length>0 ? info[1].platform.slice(0,3) + 'dows' : ''}}</td>
      </tr>
      <tr>
        <td>操作系统序列号</td>
        <td>{{ info.length>0 ? info[2].release : ''}}</td>
      </tr>
      <tr>
        <td>服务启动时间</td>
        <td>{{info.length>0 ? info[3].Date : ''}}</td>
      </tr>
    </table>
  </div>
</template>
<script setup>
import { os } from '@/api/os.js'
import { ref } from 'vue'
const info = ref([])
const loading = ref(true)
async function getInfo () {
  const { data } = await os()
  loading.value = false
  info.value = data
  console.log(data)
}
getInfo()
</script>
<style lang="less" scoped>
.cloud_frame {
  flex: 1;
  display: flex;
  align-items: center;
  flex-direction: column;
   .head{
          height: 50px;
          background: gainsboro;
          width:696px;
          display: flex;
          align-items: center;
          margin-top:50px;
          padding: 0 20px;
          .icon{
              font-size:40px;
              margin-right: 10px;
          }
        //   background: gray;
      }
  table{
      width: 700px;
      height: 200px;
      tr{
        background: #b4aeae;
      }
      td:first-of-type{
         width: 30%
      }
  }
}
</style>
